<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<script
	src="${pageContext.request.contextPath}/resources/js/jquery.validate.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/js/Appointment/Create.js"></script>

<script
	src="${pageContext.request.contextPath}/resources/js/bootstrap-datetimepicker.min.js"></script>
<link
	href="${pageContext.request.contextPath}/resources/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet">
<div id="content" class="span10">
	<!-- content starts -->

	<div>
		<ul class="breadcrumb">
			<li><a href="#">Home</a> <span class="divider">/</span></li>
			<li><a href="#">Leads</a> <span class="divider">/</span></li>
			<li><a href="#">New Appointment</a></li>
		</ul>
	</div>

	<div class="row-fluid sortable">
		<div class="box span12">
			<div class="box-header well" data-original-title>
				<h2>
					<fmt:message key="form.newappointment.title" />
				</h2>
				<div class="box-icon">
					<a href="#" class="btn btn-minimize btn-round"><i
						class="icon-chevron-up"></i></a>
				</div>
			</div>
			<div class="box-content">
				<div id="formsContent">
					<!-- Form container -->
					<form:form id="appointmentForm" commandName="appointmentDTO"
						class="form-horizontal" autocomplete="off" method="POST"
						action="newAppointment">
						<form:hidden path="parentId" value="${parentId}" />
						<form:hidden path="salesMan.id" id="salesManId" />
						<form:hidden path="contactedPerson.id" id="contactedPersonId" />
						<div class="row-fluid">
							<div class="span12">
								<fieldset>
									<legend>
										<fmt:message key="form.appointment.appointmentInformation" />
									</legend>${salesMan.id}
									<div class="row-fluid">
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input"><fmt:message
														key="form.appointment.salesMan" /> <span
													style="color: red;">*</span></label>
												<div class="controls">
													<select id="salesMan" name="salesMan"
														onchange="selectOnClick()">
														<option value="">--none--</option>
														<c:forEach items="${employees}" var="e">
															<option value="${e.id}">${e.fName}</option>
														</c:forEach>
													</select> s <label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input"><fmt:message
														key="form.appointment.contactedPerson" /> <span
													style="color: red;">*</span></label>
												<div class="controls">
													<select id="contactedPerson" name="contactedPerson"
														onchange="selectContactOnClick()">
														<option value="">--none--</option>
														<c:forEach items="${contacts}" var="e">
															<option value="${e.id}">${e.fName}</option>
														</c:forEach>
													</select> <label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
									</div>
									<div class="row-fluid">
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input" class="required"><fmt:message
														key="form.appointment.date" /><span style="color: red;">*</span>
												</label>
												<div class="controls">
													<div id="datepicker">
														<form:input path="date" id="date" name="date"
															data-format="dd/MM/yyyy" size="" />
														<span class="add-on"> <i data-time-icon="icon-time"
															data-date-icon="icon-calendar"> </i>
														</span>
													</div>

													<label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input"><fmt:message
														key="form.appointment.day" /> <span style="color: red;">*</span></label>
												<div class="controls">
													<div id="dayName">
														<form:input path="day" id="day" name="day" value=""
															maxlength="500" placeholder="" />
														<label><span class="help-inline"></span></label>
													</div>
												</div>
											</div>
										</div>
									</div>
									<div class="row-fluid">
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input" class="required"><fmt:message
														key="form.appointment.startingTime" /><span
													style="color: red;">*</span> </label>
												<div class="controls">
													<div id="timepicker">
														<form:input path="startTime" id="startTime" name="startTime"
															data-format="hh:mm" type="text"></form:input>
														<span class="add-on"> <i data-time-icon="icon-time"
															data-date-icon="icon-calendar"> </i>
														</span>
													</div>
													<label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input"><fmt:message
														key="form.appointment.endingTime" /><span
													style="color: red;">*</span></label>
												<div class="controls">
													<div id="timepicker2">
														<form:input path="endTime" id="endTime"
															name="endTime" data-format="hh:mm"></form:input>
														<span class="add-on"> <i data-time-icon="icon-time"
															data-date-icon="icon-calendar"> </i>
														</span>
													</div>
													<label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
									</div>
									<div class="row-fluid">
										<div class="span12 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input" class="required"><fmt:message
														key="form.appointment.comment" /></label>
												<div class="controls">
													<form:textarea path="comment" rows="5"
														class="input-xxlarge" id="comment" name="comment"
														placeholder="Please,Enter your comment here"></form:textarea>
													<label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
									</div>
								</fieldset>
								<fieldset>
									<legend>
										<fmt:message key="form.appointment.meetingInformation" />
									</legend>
									<div class="row-fluid">
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input" class="required"><fmt:message
														key="form.appointment.confirmationDateExpected" /> </label>
												<div class="controls">
													<label class="radio inline"> <form:radiobutton
															path="confirmationDateExpected"
															id="confirmationDateExpected"
															name="confirmationDateExpected" value="true" /> <fmt:message
															key="form.yes" />
													</label> <label class="radio inline"> <form:radiobutton
															path="confirmationDateExpected"
															id="confirmationDateExpected"
															name="confirmationDateExpected" value="false" /> <fmt:message
															key="form.no" />
													</label> <label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input" class="required"><fmt:message
														key="form.appointment.discountDone" /> </label>
												<div class="controls">
													<label class="radio inline"> <form:radiobutton
															path="discountDone" id="discountDone" name="discountDone"
															value="true" /> <fmt:message key="form.yes" />
													</label> <label class="radio inline"> <form:radiobutton
															path="discountDone" id="discountDone" name="discountDone"
															value="false" /> <fmt:message key="form.no" />
													</label> <label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
									</div>

									<div class="row-fluid">
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input" class="required"><fmt:message
														key="form.appointment.meetingdone" /> </label>
												<div class="controls">
													<label class="radio inline"> <form:radiobutton
															path="meetingDone" id="meetingDone" name="meetingDone"
															value="true" /> <fmt:message key="form.yes" />
													</label> <label class="radio inline"> <form:radiobutton
															path="meetingDone" id="meetingDone" name="meetingDone"
															value="false" /> <fmt:message key="form.no" />
													</label> <label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input" class="required"><fmt:message
														key="form.appointment.competitorOffer" /> </label>
												<div class="controls">
													<label class="radio inline"> <form:radiobutton
															path="compatitorOffer" id="compatitorOffer"
															name="compatitorOffer" value="true" /> <fmt:message
															key="form.yes" />
													</label> <label class="radio inline"> <form:radiobutton
															path="compatitorOffer" id="compatitorOffer"
															name="compatitorOffer " value="false" /> <fmt:message
															key="form.no" />
													</label> <label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
									</div>

									<div class="row-fluid">
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input" class="required"><fmt:message
														key="form.appointment.demoDone" /> </label>
												<div class="controls">
													<label class="radio inline"> <form:radiobutton
															path="demoDone" id="demoDone" name="demoDone"
															value="true" /> <fmt:message key="form.yes" />
													</label> <label class="radio inline"> <form:radiobutton
															path="demoDone" id="demoDone" name="demoDone"
															value="false" /> <fmt:message key="form.no" />
													</label> <label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input" class="required"><fmt:message
														key="form.appointment.dealClosingDone" /> </label>
												<div class="controls">
													<label class="radio inline"> <form:radiobutton
															path="dealClosingDone" id="dealClosingDone"
															name="dealClosingDone" value="true" /> <fmt:message
															key="form.yes" />
													</label> <label class="radio inline"> <form:radiobutton
															path="dealClosingDone" id="dealClosingDone"
															name="dealClosingDone" value="false" /> <fmt:message
															key="form.no" />
													</label> <label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
									</div>

									<div class="row-fluid">
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input" class="required"><fmt:message
														key="form.appointment.offerSubmitted" /> </label>
												<div class="controls">
													<label class="radio inline"> <form:radiobutton
															path="offerSubmitted" id="offerSubmitted"
															name="offerSubmitted" value="true" /> <fmt:message
															key="form.yes" />
													</label> <label class="radio inline"> <form:radiobutton
															path="offerSubmitted" id="offerSubmitted"
															name="offerSubmitted" value="false" /> <fmt:message
															key="form.no" />
													</label> <label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input" class="required"><fmt:message
														key="form.appointment.replyPeriod" /> </label>
												<div class="controls">
													<form:input path="replyPeriod" id="replyPeriod"
														name="replyPeriod" value="" maxlength="500" placeholder="" />
													<label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
									</div>
									<div class="row-fluid">
										<div class="span12 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input" class="required"><fmt:message
														key="form.appointment.customeNeed" /></label>
												<div class="controls">
													<form:textarea path="CustomerNeed" rows="5"
														class="input-xxlarge" id="CustomerNeed"
														name="CustomerNeed"
														placeholder="Please,Enter your Customer Need here"></form:textarea>
													<label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
									</div>
									<div class="row-fluid">
										<div class="span12 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input" class="required"><fmt:message
														key="form.appointment.dealClosingReason" /></label>
												<div class="controls">
													<form:textarea path="dealClosingReason" rows="5"
														class="input-xxlarge" id="dealClosingReason"
														name="dealClosingReason"
														placeholder="Please,Enter your deal Closing Reason here"></form:textarea>
													<label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
									</div>
								</fieldset>
								<fieldset>
									<legend>
										<fmt:message key="form.appointment.nextFollowUpInformation" />
									</legend>
									<div class="row-fluid">
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input" class="required"><fmt:message
														key="form.appointment.nextFollowUp" /> </label>
												<div class="controls">
													<label class="radio inline"> <form:radiobutton
															path="nextFollowUp" id="nextFollowUp" name="nextFollowUp"
															value="true" onclick="radioOnClick()" /> <fmt:message
															key="form.yes" />
													</label> <label class="radio inline"> <form:radiobutton
															path="nextFollowUp" id="nextFollowUp" name="nextFollowUp"
															value="false" onclick="radioOnClick()" /> <fmt:message
															key="form.no" />
													</label> <label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input" class="required"><fmt:message
														key="form.appointment.nextFollowUpDate" /> </label>
												<div class="controls">
													<div id="followupdatepicker">
														<form:input path="followUpDate" id="followUpDate"
															name="followUpDate" placeholder="" disabled="true"
															data-format="dd/MM/yyyy" size="" />
														<span class="add-on" id="followIcon"> <i
															data-time-icon="icon-time" data-date-icon="icon-calendar">
														</i>
														</span>
													</div>
													<label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
									</div>
									<div class="row-fluid">
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input"><fmt:message
														key="form.appointment.nextFollowUpType" /></label>
												<div class="controls">
													<form:select path="followUpType" id="followUpType"
														name="followUpType" disabled="true">
														<form:option value="">--none--</form:option>
														<form:option value="call">Call</form:option>
														<form:option value="appointment">Appointment</form:option>
													</form:select>
													<label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
										<div class="span6 bgcolor">
											<div class="control-group">
												<label class="control-label" for="input"><fmt:message
														key="form.appointment.nextFollowUpDetails" /></label>
												<div class="controls">
													<form:textarea path="followUpDetails" rows="5"
														disabled="true" id="followUpDetails"
														name="followUpDetails"
														placeholder="Please,Enter your next FollowUp Details here"></form:textarea>
													<label><span class="help-inline"></span></label>
												</div>
											</div>
										</div>
									</div>
								</fieldset>
							</div>
						</div>
						<div class="form-actions">
							<button id="saveButton" type="submit" class="btn btn-primary">
								<fmt:message key="form.appointment.CreateBtn" />
							</button>
							<button id="cancelButton" type="button" class="btn">
								<fmt:message key="form.cancel" />
							</button>
						</div>
					</form:form>
				</div>
			</div>
		</div>
		<!--/span-->

	</div>
	<!--/row-->
	<!-- content ends -->
</div>
<!--/#content.span10-->
<hr />